<template>
  <div>
      <!-- 头部 -->
    <header>
        <div class="on">
            <span class="iconfont" @click='$router.go(-1)'>&#xe6bc;</span>
            <h2>小U商城</h2>
            <p>
                <span class="iconfont">&#xf0112;</span>
                <i></i>
                <span class="iconfont">&#xe71e;</span>
            </p>
        </div>
        <!-- 搜索和导航 -->
        <section id="section">
            <!-- 上 -->
            <div class="top">
                <span class="iconfont">&#xe613;
                </span>
                <h1>
                    <img src="../assets/images/logo.jpg" alt="">
                </h1>
                <input type="text" class="iconfont" placeholder="按内容搜索">
                <span class="iconfont">&#xe663;</span>
            </div>
            <!-- 下 -->
            <div class="under">
                <span>综合推荐
                    <i></i>
                </span>
                <nav>
                    <a href="#">销量</a>
                    <a href="#">价格</a>
                    <a href="#">好评度</a>
                    <a href="#">店铺</a>
                </nav>
                <p><span class="iconfont">&#xe611;</span>筛选</p>
            </div>
        </section>
    </header>
    <!-- 头部结束 -->
    <main id="main">
        <div class="top">
            <p>筛选11.11大促商品</p>
        </div>
        <div class="under">
            <ul>
                <!-- 商品1 -->
                <li class="li1" v-for='item in list' :key='item.id' @click="getdetail(item.id)">
                    <img :src="item.img">
                    <div class="right">
                        <span class="s1">{{item.goodsname}}</span>
                        <span class="s2">{{item.goodsname}}</span>
                        <p>
                            <span>￥<span>{{item.price}}</span></span>
                            <span>￥{{item.market_price}}</span>
                            <span>999人已付款</span>
                        </p>
                        <span class="s3">11.11限时299元起</span>
                        <i>999条评论<span>99.9%好评</span></i>
                    </div>
                </li>
            </ul>
        </div>
    </main>
  </div>
</template>

<script>
//调接口
import { goodsList } from "../request/api";
export default {
  data() {
    return {
      list:[],
    };
  },
  mounted(){
    goodsList({
      cateid:this.$route.params.cateid,
    }).then(res=>{
      console.log(res,'上坡列表');
      if(res.data.code ==200){
        this.list = res.data.list.goodData;
        console.log(this.list);
      }
    })
  },
  methods:{
    getdetail(id){
      this.$router.push('/detail/'+id)
    }
  }
};
</script>

<style scoped>
@import '../assets/css/list.css';
</style>


